import React, { Component } from 'react';
import { TabBar } from 'antd-mobile'

import Shouye from './views/Shouye';
import Fenlei from './views/Fenlei';
import Gouwu from './views/Gouwu';
import Wode from './views/Wode';

class App extends Component {
  state = {
    selectedTab: 'shouye',
    hidden: false,
    fullScreen: false,
  }
  gaibian = (a) => {
    this.setState({
      selectedTab: a
    })
  }

  render() {
    return (
      <div style={{ position: 'fixed', height: '100%', width: '100%', top: 0 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="首页"
            key="Life"
            icon={<div
              className='iconfont icon-yemian-copy-copy-copy'
            />
            }
            selectedIcon={<div
              className='iconfont icon-yemian1-copy'
            />
            }
            selected={this.state.selectedTab === 'shouye'}
            // badge={1}
            onPress={() => {
              this.setState({
                selectedTab: 'shouye',
              });
            }}
            data-seed="logId"
          >
            {/* // 显示内容 */}
            <Shouye gaib={(a)=>this.gaibian(a)}  />
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div
                className='iconfont icon-leimupinleifenleileibie'
              />
            }
            selectedIcon={
              <div
                className='iconfont icon-category'
              />
            }
            title="分类"
            key="Koubei"
            selected={this.state.selectedTab === 'fenlei'}
            onPress={() => {
              this.setState({
                selectedTab: 'fenlei',
              });
            }}
            data-seed="logId1"
          >
            {/* // 显示内容 */}
            <Fenlei />
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div
                className='iconfont icon-gouwuche1'
                style={{ fontSize: '20px' }}
              />}
            selectedIcon={
              <div
                className='iconfont icon-gouwuche'
                style={{ fontSize: '20px' }}
              />
            }
            title="购物车"
            key="购物车"
            // 右上角小红点
            // dot
            selected={this.state.selectedTab === 'gouwuche'}
            onPress={() => {
              this.setState({
                selectedTab: 'gouwuche',
              });
            }}
          >
            {/* // 显示内容 */}
            <Gouwu />
          </TabBar.Item>

          <TabBar.Item
            icon={
              <div
                className='iconfont icon-wode1'
              />
            }
            selectedIcon={
              <div
                className='iconfont icon-wode2'
              />
            }
            title="我的"
            key="wode"
            selected={this.state.selectedTab === 'wode'}
            onPress={() => {
              this.setState({
                selectedTab: 'wode',
              });
            }}
          >
            {/* // 显示内容 */}
            <Wode gaib={(a)=>this.gaibian(a)} />
          </TabBar.Item>
        </TabBar>
      </div>
    )
  }
}

export default App;
